<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>等高线</title>
    <script include="jquery,papaparse" src="./static/libs/include-lib-local.js"></script>
    <script
      include="language,deckgl"
      src="./static/libs/include-mapboxgl-local.js"
    ></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      //一定要去mapbox注册一个key,这个key会失效的
      mapboxgl.accessToken =
        "pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA";
      var map = new mapboxgl.Map({
        container: "map", // 绑定div
        style: "mapbox://styles/mapbox/dark-v9", // 使用MapBox官方的样式
        center: [-121.40334, 38.19812],
        zoom: 5.5
      });
      map.addControl(new MapboxLanguage(), "top-right"); //中文支持
      map.addControl(new mapboxgl.NavigationControl(), "top-left");
      
      $.get('../../static/data/deckgl/earthquakes_data.csv', function(csvstr) {
        var result = Papa.parse(csvstr, {skipEmptyLines: true, header: true});
        addLayer(result.data);  
      });

      function addLayer(features) {
        deckglLayer = new mapboxgl.zondy.DeckglLayer("scatter-plot", {
            data: features,
            props: {
                radiusScale: 300,
                radiusMaxPixels: 500,
                opacity: 0.3,
                autoHighlight: true,
                highlightColor: [255, 255, 0, 255],
                onHover: function (e) {
                }
            },
            callback: {
                getPosition: function (feature) {
                    if (!feature || !feature.Longitude || !feature.Latitude) {
                        return [0, 0, 0];
                    }
                    return [Number(feature.Longitude), Number(feature.Latitude), 0];
                },
                getColor: function (feature) {
                    if (feature.Magnitude >= 2.5 && feature.Magnitude <= 3.31) {
                        return [118, 42, 131];
                    } else if (feature.Magnitude > 3.31 && feature.Magnitude <= 4.13) {
                        return [175, 141, 195];
                    } else if (feature.Magnitude > 4.13 && feature.Magnitude <= 4.94) {
                        return [231, 212, 232];
                    } else if (feature.Magnitude > 4.94 && feature.Magnitude <= 5.76) {
                        return [217, 240, 211];
                    } else if (feature.Magnitude > 5.76 && feature.Magnitude <= 6.57) {
                        return [127, 191, 123];
                    } else if (feature.Magnitude >= 6.57) {
                        return [27, 120, 55];
                    }

                    return [0, 0, 0, 0]
                },
                getRadius: function (feature) {
                    if (feature.Magnitude < 2.73) {
                        return Number(feature.Magnitude);
                    }
                    return Math.pow(Number(feature.Magnitude), 2.5);
                }
            }
        });
        deckglLayer.addTo(map);
      }

    </script>
  </body>
</html>
